<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <link rel="stylesheet" href="./css/admin/base-v2.css">
    <link rel="stylesheet" href="./lib/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/admin/app.css">
</head>

<body>

    <div class="app-page">
        <!--<div class="app-page-header">-->
            <!--<div class="page-title">-->
                <!--<div class="title">分页</div>-->
            <!--</div>-->
        <!--</div>-->

        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">

                    <div class="tree-js"></div>
                </div>
            </div>
        </div>

        <script src="lib/jquery.min.js"></script>
        <script src="js/tree.js"></script>
        <script>
            // 当前所选终端分组
            var deviceGroup;

            // 树形控件
            var tree = new Tree('.tree-js', {
                type: 1,
                data: [{
                        label: '全部分组',
                    },
                    {
                        label: '四川省',
                        // 展开分组
                        open: true,
                        children: [{
                            label: '成都市',
                            data: {
                                value: 'test',
                            },
                            children: [{
                                label: '高新区',
                                data: {
                                    value: 'test',
                                },
                            }]
                        }, {
                            label: '绵阳市',
                            data: {
                                value: 'test',
                            }
                        }, {
                            label: '眉山市',
                            data: {
                                value: 'test',
                            }
                        }]
                    },
                    {
                        label: '东北三省',
                        children: [{
                            label: '黑龙江',
                            data: {
                                value: 'test',
                            }
                        }]
                    }
                ],
                // 当前选中的数据
                onChange: function(trreItem) {
                    if (trreItem.checked) {
                        deviceGroup = trreItem;

                    } else {
                        deviceGroup = null;
                    }

                    // 全部分组全选/反选
                    if (trreItem.label == '全部分组') {
                        tree.forEach(function(item) {
                            if (trreItem.label == '全部分组') {
                                item.checked = trreItem.checked;
                            }
                        })
                    } else {
                        // 判断子类分组是否选中，修改全部分组对应状态
                        var checkAll = true;

                        tree.forEach(function(item) {
                            if (item.label != '全部分组' && !item.checked) {
                                checkAll = false;
                                return false;
                            }
                        })

                        tree.options.data[0].checked = checkAll;
                    }
                }
            })


            // 获取树形控件数据
            function getTreeData() {
                tree.forEach(function(treeItem) {
                    if (treeItem.checked) {
                        console.log('treeItem');
                        console.log(treeItem);
                    }
                })
            }
        </script>
</body>

</html>